@import '~@wordpress/base-styles/variables';

@media ( max-width: 600px ) {
	// stylelint-disable-next-line selector-max-id
	.is-iframed #wpbody {
		padding-top: 0;
	}

	.is-iframed .components-editor-notices__snackbar {
		padding-right: 80px;
	}
}

// For Gutenberg < 7.7
@media ( min-width: 600px ) {
	body.is-iframed.is-fullscreen-mode .edit-post-header {
		top: 0;
	}
}

// For Gutenberg >= 7.7
// 782px is $break-medium in Gutenberg which is
// the starting breakpoint for tablet view.
@media ( max-width: 782px ) {
	// In non-iframed version, top: 46px is provided to accommodate #wpadminbar.
	// On fullscreen mode, #wpadminbar is visible on tablet & mobile voew because
	// fullscreen mode actually don't exists on tablet & mobile view.
	// See: https://github.com/WordPress/gutenberg/pull/13425
	body.is-iframed.is-fullscreen-mode .block-editor-editor-skeleton, // Gutenberg >= 7.7 && < 8.0.0
	body.is-iframed.is-fullscreen-mode .interface-interface-skeleton { // Gutenberg >= 8.0.0
		top: 0;
	}
}

body.is-fullscreen-mode {
	.edit-post-editor-regions,
	.components-editor-notices__dismissible {
		top: 0;
	}
}

@media ( min-width: 782px ) and ( max-width: 1079px ) {
	.is-fullscreen-mode .edit-post-layout.has-fixed-toolbar .components-notice {
		top: 37px;
	}
}

.components-notice-list {
	z-index: 29; // Ensure notices are placed behind the editor header (z-index: 30).
}

.wpcom-block-editor__close-button {
	height: $header-height !important;
}
